<template>
    <el-form ref="loginFormRef" :model="LoginForm" :rules="LoginRules" label-width="0px" class="login-from"> 
        <!-- 用户名 -->
        <el-form-item prop='username'>
            <el-input v-model="LoginForm.username" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
            <el-input v-model="LoginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
        </el-form-item>
        <!-- 登陆按钮 -->
        <div class="btns">
            <el-button type="primary" @click="loginClick">登陆</el-button>
            <el-button type="info" @click="formRef">重置</el-button>
        </div>
        
    </el-form>
</template>
<script>
import {getLogindata} from 'network/login'
export default {
    name : 'LoginFrom',
    data() {
        return {
            LoginForm : {
                username : 'admin',
                password : '123456'
            },
            LoginRules : {
                username: [
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
                    { required: true, message: '请输入用户名称', trigger: 'blur' }
                ],
                password : [
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
                    { required: true, message: '请输入用户密码', trigger: 'blur' }
                ]
            }
        }
    },
    methods : {
        formRef(){
            this.$refs.loginFormRef.resetFields()	
        },
        loginClick(){
            this.$refs.loginFormRef.validate(valid => {
                if(!valid) return
                getLogindata(this.LoginForm).then(res => {
                    // console.log(res)
                    const data = res.data
                    if(data.meta.status === 200){
                        this.$Message.success(data.meta.msg)
                        this.$router.replace('/home')
                        window.sessionStorage.setItem('token',data.data.token)
                    }else if(data.meta.status === 400){
                        this.$Message.error(data.meta.msg)
                    }
                })
            })
        }
    },
    mounted(){
        // if(this.loginData.m)
    }
}
</script>
<style lang="less" scoped>
.login-from{
    padding: 0px 20px;
    position: absolute;
    bottom: 10px;
    width: 100%;
    box-sizing: border-box;
}
.btns{
    display: flex;
    justify-content: flex-end;
}
</style>